<style>
    .content-editor{resize: vertical;}
    .timeline-body img{max-width: 100%;}
</style>
<script type="text/x-template" id="template-topic-essay">
    <div class="col-md-12">

        <div class="col-md-6">
            <h3>动态
                <small>共{{total}}条</small>
                <small><a class="btn btn-link pull-right" @click="getList"><i class="fa fa-refresh bt-green"></i>刷新</a></small>
            </h3>
            <ul class="timeline">
                <li v-for="item in list">
                    <i class="fa fa-comment bg-blue"></i>
                    <div class="timeline-item">
                        <span class="time"><i class="fa fa-clock-o"></i> {{item.created}}</span>
                        <h3 class="timeline-header"><a >{{item.title}}</a> </h3>
                        <div class="timeline-body" v-html="item.content"></div>
                        <div class="timeline-footer"></div>
                    </div>
                </li>
            </ul>
            <div class="col-md-12">
                <page :rows="rows" :last="last" v-model="page"></page>
            </div>
        </div>

        <div class="col-md-6" v-if="is_current">
            <h3>发表</h3>
            <div class="col-md-12">
                <div class="form">
                    <div class="form-group">
                        <label>标题：</label>
                        <input class="form-control" v-model="edit_item.title">
                    </div>
                    <div class="form-group">
                        <label>内容：</label>
                        <ck-editor v-model="edit_item.content" :tag="newID"></ck-editor>
                    </div>
                    <div class="form-group">
                        <a class="btn btn-primary" @click="save">发表</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</script>
<script>
    Vue.component('topic-essay', {
        template: '#template-topic-essay',
        props: ['topic_id','topic','teacher','is_current'],
        data: function () {
            return {
                list: [],
                rows: 10,
                page: 1,
                last: 0,
                total: 0,
                edit_item: {},
                newID: Date.now()
            }
        },
        created: function () {
            this.add()
        },
        methods: {
            getList: function () {
                if (this.topic_id <= 0) return;
                ajax({
                    uri: '/topics/essay_list',
                    data: {
                        topic_id:this.topic_id,
                        rows:this.rows,
                        page:this.page,
                    },
                    success: function (resp) {
                        this.list = resp.data;
                        this.last = resp.last_page;
                        this.total = resp.total;
                    }.bind(this)
                })
            },
            add: function () {
                this.edit_item = {title:'',content:'',};
                this.newID = Date.now()
            },
            edit: function (item) {
                this.edit_item = item;
            },
            save: function () {
                var item = this.edit_item;
                if (!item.title || !item.content) {
                    alert('请完善资料');
                    return;
                }
                item.topic_id = this.topic_id;
                ajax({
                    uri: '/topics/essay_save',
                    data: item,
                    success: function (resp) {
                        this.add();
                        this.getList();
                    }.bind(this)
                })
            },
            turnPage: function (page) {
                this.page = page;
            }
        },
        watch: {
            'page': function (nv, ov) {
                this.getList();
            },
            'topic_id': function (nv, ov) {
                this.getList()
            }
        }
    });
</script>


<style>
    .replay{padding: 4px 10px;background: #eee;}
    .item-content,
    .replay .replay-content{white-space: pre-wrap;}
    .replay .replay-nick{text-align: right;}
</style>
<script type="text/x-template" id="template-topic-chat">
    <div class="col-md-12">
        <div class="col-md-6">
            <h3>互动
                <small><a class="btn btn-link pull-right" @click="getList"><i class="fa fa-refresh bt-green"></i>刷新</a></small>
            </h3>
            <ul class="timeline">
                <li v-for="item in list">
                    <i class="fa fa-comments bg-yellow"></i>
                    <div class="timeline-item">
                        <span class="time"><i class="fa fa-clock-o"></i> {{item.created}}</span>
                        <h3 class="timeline-header"><a >{{item.nickname}}</a> </h3>
                        <div class="timeline-body">
                            <div class="replay" v-if="item.target_id">
                                <div class="replay-content">{{item.target_content}}</div>
                                <div class="replay-nick">--{{item.target_nickname}}</div>
                            </div>
                            <div class="item-content">{{item.content}}</div>
                        </div>
                        <div class="timeline-footer">
                            <a v-if="is_current" class="btn btn-warning btn-flat btn-xs" @click="reply(item)">回复</a>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="col-md-12">
                <page :rows="rows" :last="last" v-model="page"></page>
            </div>
        </div>

        <div class="col-md-6" v-if="is_current">
            <div class="form">
                <div class="form-group">
                    <span class="placeholder">{{edit_item.placeholder}}</span>
                    <textarea class="form-control content-editor" v-model="edit_item.content"
                              ref="content"></textarea>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary" @click="save">提交</button>
                    <button class="btn btn-primary" @click="add">新建</button>
                </div>
            </div>
        </div>

    </div>
</script>
<script>
    Vue.component('topic-chat', {
        template: '#template-topic-chat',
        props: ['topic_id','teacher','topic','is_current'],
        data: function () {
            return {
                list: [],
                rows: 10,
                page: 1,
                last: 0,
                edit_item: {},
                show: {
                    list: true,
                    edit: false
                }
            }
        },
        created: function () {
            this.add();
        },
        methods: {
            getList: function () {
                if (this.topic_id <= 0) return;
                ajax({
                    uri: '/topics/chat_list',
                    data: {
                        topic_id:this.topic_id,
                        rows:this.rows,
                        page:this.page,
                    },
                    success: function (resp) {
                        this.list = resp.data;
                        this.last = resp.last_page;
                    }.bind(this)
                })
            },
            add: function () {
                this.edit_item = {placeholder:'发表互动：'}
            },
            reply: function (item) {
                this.edit_item = {reply_id: item.id, placeholder: '@'+item.nickname+'：'};
                this.$refs.content.focus();
            },
            save: function () {
                var content = this.edit_item.content;
                if (!content) {
                    alert('内容不能为空');return
                }
                var item = {content: content};
                var uri;
                if (this.edit_item.reply_id) {
                    uri = '/topics/chat_reply';
                    item.reply_id = this.edit_item.reply_id;
                } else {
                    uri = '/topics/chat_create';
                    item.topic_id = this.topic_id;
                }
                ajax({
                    uri: uri,
                    data: item,
                    success: function (resp) {
                        this.add();
                        this.getList();
                    }.bind(this)
                })
            }
        },
        watch: {
            topic_id: function (nv, ov) {
                this.getList()
            }
        }
    })
</script>


<script type="text/x-template" id="template-topic">
<div >

    <div class="col-md-12" v-show="!current.id">
        <div class="form">
            <div class="form-group">
                <label>创建今日话题：</label>
                <input class="form-control" v-model="edit_title" placeholder="输入话题">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary" @click="save">提交</button>
            </div>
        </div>
    </div>

    <div class="col-md-12" v-show="show.list">
        <div class="col-md-8">
            <h4>{{teacher}}老师的话题
                <small><a class="btn btn-link pull-right" @click="getList"><i class="fa fa-refresh bt-green"></i>刷新</a></small>
            </h4>
        </div>
        <div class="col-md-8">
            <ul class="timeline">
                <li v-for="item in list">
                    <i class="fa fa-wikipedia-w bg-maroon"></i>
                    <div class="timeline-item">
                        <span class="time"><i class="fa fa-calendar"></i> {{item.play_date}}</span>
                        <span class="time"><i class="fa fa-users"></i> {{item.participants_count}}</span>
                        <h3 class="timeline-header"><a >主题</a> </h3>
                        <div class="timeline-body">{{item.title}}</div>
                        <div class="timeline-footer">
                            <a class="btn btn-primary  btn-xs" @click="enter(item)">进入话题</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-12">
            <page :rows="rows" :last="last" v-model="page"></page>
        </div>
    </div>

    <div class="col-md-12" v-show="show.sub">
        <div class="col-md-12">
            <a class="btn btn-link" @click="showToggle('list')">返回话题</a>
        </div>

        <div class="col-md-12">
            <div class="col-md-12">
                <ul class="nav nav-tabs">
                    <li role="presentation" :class="{active:tab.essay}"><a href="javascript:void(0)" @click="tabToggle('essay')">老师动态</a></li>
                    <li role="presentation" :class="{active:tab.chat}"><a href="javascript:void(0)" @click="tabToggle('chat')">师生互动</a></li>
                </ul>
            </div>
            <div class="col-md-12 panel panel-default" v-show="tab.essay">
                <div class="panel-body">
                    <topic-essay :topic_id="chose.id" :topic="chose.title" :teacher="chose.teacher" :is_current="chose.is_current"></topic-essay>
                </div>
            </div>
            <div class="col-md-12 panel panel-default" v-show="tab.chat">
                <div class="panel-body">
                    <topic-chat :topic_id="chose.id" :topic="chose.title" :teacher="chose.teacher" :is_current="chose.is_current"></topic-chat>
                </div>
            </div>
        </div>

    </div>

</div>
</script>
<script>
    Vue.component('topic', {
        template: '#template-topic',
        props: ['teacher_id', 'teacher'],
        data: function () {
            return {
                list: [],
                rows: 10,
                page: 1,
                last: 1,
                edit_title: '',
                current: {},
                show: {
                    list: true,
                    edit: false,
                    sub: false
                },
                have_current: false,
                chose: {},
                tab: {
                    essay: true,
                    chat: false
                }
            }
        },
        methods: {
            getList: function () {
                if (this.teacher_id <= 0) return;
                ajax({
                    uri: '/topics/topic_list',
                    data: {rows: this.rows,page: this.page, teacher_id:this.teacher_id},
                    success: function (resp) {
                        var list = resp.data;
                        var current = null;
                        list.forEach(function (o, i) {
                            if (o.is_current) {
                                current = o;
                            }
                        }.bind(this));
                        this.current = current ? current : {};

                        this.list = list;
                        this.last = resp.last_page;
                        this.chose = {};
                    }.bind(this)
                })
            },
            save: function () {
                if (this.teacher_id <= 0) return;
                if (!this.edit_title) return;
                ajax({
                    uri: '/topics/topic_save',
                    data: {teacher_id:this.teacher_id,title:this.edit_title},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            showToggle: function (prop) {
                for (var p in this.show) {
                    this.show[p] = (p === prop)
                }
            },
            enter: function (item) {
                this.chose = {id:item.id, topic:item.title, teacher: this.teacher, is_current: item.is_current};
                this.showToggle('sub')
            },
            tabToggle: function (t) {
                for (var s in this.tab) {
                    this.tab[s] = s===t;
                }
            }
        },
        watch: {
            'teacher_id': function (nv, ov) {
                this.showToggle('list');
                this.getList();
            }
        }
    })
</script>

<style>
    ul.users-list li{width: 8%; transition: all 0.2s; margin: 0 1%; cursor: pointer}
    ul.users-list li:hover{transform: scale(1.125,1.125);}
</style>
<section class="content-header">
    <h1>话题<small>动态互动</small></h1>
</section>
<section class="content" id="topic-app">
    <div class="row" v-show="show.teacher">
        <div class="col-md-12">
            <!-- USERS LIST -->
            <div class="box box-danger">
                <div class="box-header with-border">
                    <h3 class="box-title">所有老师</h3>

                    <div class="box-tools pull-right">
                        <span class="label label-danger">{{teachers.length}} 位老师</span>
                        <!--<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>-->
                        <!--</button>-->
                        <!--<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>-->
                        <!--</button>-->
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <ul class="users-list clearfix">
                        <li v-for="t in teachers" @click="enter(t)">
                            <img :src="t.avatar + '?x-oss-process=image/resize,h_100'" title="点击进入话题">
                            <a class="users-list-name">{{t.realname}}</a>
                            <span class="users-list-date">{{t.name}}</span>
                        </li>
                    </ul>
                    <!-- /.users-list -->
                </div>
                <!-- /.box-body -->
                <div class="box-footer text-center">
                    <a href="javascript:void(0)" class="uppercase" @click="getList">刷新</a>
                </div>
                <!-- /.box-footer -->
            </div>
            <!--/.box -->
        </div>
    </div>

    <div class="row" v-show="show.topic">
        <div class="col-md-12">
            <a class="btn btn-link btn-sm" @click="showToggle('teacher')">返回老师选择</a>
        </div>
        <div class="col-md-12">
            <topic :teacher_id="chose.id" :teacher="chose.realname"></topic>
        </div>
    </div>
</section>
<script>
    var topic_app = new Vue({
        el: '#topic-app',
        data: {
            teachers: [],
            chose: {},
            show: {
                teacher: true,
                topic: false
            }
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/common/teacher_names',
                    success: function (resp) {
                        this.teachers = resp.data;
                    }.bind(this)
                })
            },
            enter: function (t) {
                this.chose = t;
                this.showToggle('topic')
            },
            showToggle: function (prop) {
                for (var p in this.show) {
                    this.show[p] = (p === prop)
                }
            }
        }
    })
</script>
